.klein-loading {
  display: flex;
  font-size: 14px;
  color: #ffffff;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.klein-loading>.klein-loading-dot {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  transform: rotate(45deg);
  box-sizing: border-box;
  animation: rotate 1.25s infinite linear;

  i {
    position: absolute;
    display: block;
    width: 1.8em;
    height: 1.8em;
    background-color: #afafaf;
    border-radius: 100%;
    opacity: 0.3;
    transform: scale(0.75);
    transform-origin: 50% 50%;
    animation: move 0.8s infinite linear alternate;

    &:nth-child(1) {
      top: 0;
      left: 0;
    }

    &:nth-child(2) {
      top: 0;
      right: 0;
      animation-delay: 0.4s;
    }

    &:nth-child(3) {
      right: 0;
      bottom: 0;
      animation-delay: 0.6s;
    }

    &:nth-child(4) {
      bottom: 0;
      left: 0;
      animation-delay: 0.8s;
    }
  }
}

.klein-loading>.klein-loading-description {
  display: flex;
  padding: 1.8em 0 0.2em;
  line-height: 1;
  letter-spacing: 0.025em;
  align-items: flex-end;
  justify-content: center;

  .klein-loading-point {
    display: flex;
    margin-left: 0.3em;

    i {
      display: block;
      width: 0.3em;
      height: 0.3em;
      background-color: currentcolor;
      border-radius: 100%;
      animation: ball-pulse 0.8s ease infinite;

      &:nth-child(1) {
        animation-delay: -200ms;
      }

      &:nth-child(2) {
        margin: 0 0.3em;
        animation-delay: -100ms;
      }

      &:nth-child(3) {
        animation-delay: 0ms;
      }
    }
  }
}

@keyframes rotate {

  to {
    transform: rotate(405deg);
  }
}

@keyframes move {

  to {
    opacity: 1;
  }
}

@keyframes ball-pulse {

  0%,
  60%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  30% {
    opacity: 0.1;
    transform: scale(0.01);
  }
}